<template>
	<view class="conter">
		<u-list height="1020rpx" @scrolltolower="scrolltolower">
			<view class="list_duck" v-if="collectionList.length != 0">
				<u-list-item v-for="item in collectionList" :key="item.id">
					<view @click="toggleMask(item)" class="min_ducklist">
						<view v-if="selectedItems.includes(item.id)" class="popopop"></view>
						<view class="duck_image">
							<image :src="imgUrl + item.name" mode="" class="imgsos"></image>
							<view class="number_duck">#{{ item.number }}</view>
						</view>
						<view class="duck_buttom">
							<view class="name_duck">
								<view class="name">Duck</view>
								<view class="num">繁育次数：{{ item.birthNumber || '0' }}/5</view>
							</view>
							<view class="expedition">持有</view>
						</view>
					</view>
				</u-list-item>
			</view>
			<view v-if="collectionList.length == 0">
				<image style="
				width: 280rpx;
				height: 280rpx;
				margin: 295rpx 210rpx 0;
				" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</u-list>
		<view class="qiehaun">
			<view class="">
				<image src="../../static/images/crazy/abcdefg.png" mode=""></image>
			</view>
			<view class="crazytow">
				<view class="office">可繁育Duck：{{ total }}只</view>
				<view class="office">金豆：{{ growList[0] ? growList[0] : 0 }}/{{ growList[1] ? growList[1] : 0 }}</view>
			</view>
			<view @click="show = true" class="images">确认繁育</view>
		</view>
		<!-- 确认繁育 -->
		<u-popup bgColor="transparent" mode="center" :show="show" @close="close">
			<view class="confirm-grow">
				<view class="title">确认繁育</view>
				<view class="popop">确认繁育后请耐心等待一会哟！</view>
				<view class="btn-box">
					<view class="cancel-btn" @click="cancel">取消</view>
					<view class="confirm-btn" @click="throttleConfirm">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 确认繁育 -->
	</view>
</template>

<script>
import { pagingQuery } from '@/api/venue/venue.js';
import { getDna2 } from '@/api/work/market.js';
import config from '@/config';
import { getBreedQuery, getBreedCosts, getBreed } from '@/api/breed/breed.js';
import { login } from '../../api/login';
export default {
	data() {
		return {
			collectionList: [], //所有数据
			page: 1, //当前页码
			size: 10, //每页显示条数
			total: 0,
			imgUrl: config.gillUrl,
			imgUrl: config.imgUrl,
			name: '',
			isHunting: -1,
			birthNumber: -1,
			status: 'loadmore',
			selectedItems: [],
			selectedArr: [],
			growList: [],
			arrayList: [],
			petId: '',
			dnaList: {},
			currentIndex: -1,
			isOpen: false,
			show: false,
			throttling: false // 初始时不处于节流状态
		};
	},
	onLoad() {
		this.getCollectionList();
	},
	methods: {
		// 防抖
		throttleConfirm() {
			if (!this.throttling) {
				// 如果没有处于节流状态，执行你的按钮点击逻辑
				this.confirmGrow();
				// 设置节流状态为 true，并在一定时间后恢复为 false
				this.throttling = true;
				setTimeout(() => {
					this.throttling = false;
				}, 2000); // 1000毫秒（1秒）是节流的时间间隔，你可以根据需要调整
			}
		},
		// 获取 可繁育 duck 列表
		async getCollectionList() {
			let param = {};
			param.page = this.page;
			param.size = this.size;
			const data = await getBreedQuery(param);
			let _this = this;
			data.data.res.map((i) => {
				_this.collectionList.push({
					...i,
					isOpen: false,
					dnalist: []
				});
			});
			this.total = data.data.total;
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.collectionList.length < this.total) {
				this.page++;
				//则还有下一页
				this.status = 'loadmore';
				this.getCollectionList();
			} else {
				this.page = 1;
				this.status = 'nomore';
			}
		},
		// 点击 duck 进行 繁育
		toggleMask(item) {
			if (item && item.id) {
				// 防止item或者item.id为null或undefined
				const index = this.selectedItems.indexOf(item.id);
				if (index === -1) {
					// 如果数组中不存在该项，则添加到数组
					this.selectedItems.push(item.id);
					this.selectedArr.push(item);
				} else {
					// 如果数组中存在该项，则从数组中移除
					this.selectedItems.splice(index, 1);
					this.selectedArr.splice(index, 1);
				}
				// 如果选择项超过两个，移除最早选择的项
				if (this.selectedItems.length > 2) {
					this.selectedItems.shift();
					this.selectedArr.shift();
				}

				// 其他逻辑...在这里添加条件检查
				if (this.selectedArr.length > 0) {
					this.getImgList(this.selectedArr);
				} else {
					this.growList = [];
				}
			} else {
				console.error('duck id 不存在');
			}
		},
		// 判断 近亲
		async getImgList(item) {
			// 检查item是否为数组且长度大于等于2
			if (Array.isArray(item) && item.length >= 2) {
				this.arrayList = item;
				const data = await getBreedCosts(item[0].id, item[1].id);
				if (data.code === 200) {
					this.growList = data.data;
				} else {
					this.$modal.showToast(data.msg);
					// 清空已选择的项
					this.selectedItems = [];
					this.selectedArr = [];
					this.growList = []; // 清空数据
				}
			}
		},
		// 繁育成功接口
		async confirmGrow() {
			if (this.selectedItems.length === 2 && this.selectedItems[0] !== undefined && this.selectedItems[1] !== undefined) {
				// 发送请求
				const data = await getBreed(this.selectedItems[0], this.selectedItems[1]);

				if (data.code === 200) {
					this.$modal.showToast('繁育成功');
					// 在重新获取列表之前清空当前列表
					this.collectionList = [];
					this.page = 1; // 重置页码至第一页以重新获取整个列表
					await this.getCollectionList(); // 重新获取列表
				} else {
					this.$modal.showToast(data.msg);
				}

				// 清空选中项和其他数据
				this.selectedItems = [];
				this.show = false;
				this.growList = [];
			} else {
				// 提示用户选择正确的项
				this.$modal.showToast('请选择两个duck');
				this.selectedItems = [];
				this.show = false;
				this.growList = [];
			}
		},

		cancel() {
			this.show = false;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.conter {
	padding: 10rpx 34.88rpx;

	.confirm-grow {
		width: 500rpx;
		height: 250rpx;
		background-color: #16142d;
		border-radius: 26rpx;
		text-align: center;
		border: 2rpx solid #8a92a3;

		.title {
			color: #fff;
			font-size: 31rpx;
			font-weight: 800;
			margin-top: 40rpx;
			font-family: 'font';
		}

		.popop {
			color: #fff;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 10rpx;
			font-family: 'font';
		}

		.btn-box {
			display: flex;
			margin-top: 40rpx;
			justify-content: space-around;
			padding: 0 30rpx 0 30rpx;
		}

		.cancel-btn {
			display: flex;
			color: #ffffff;
			font-size: 24rpx;
			font-weight: 800;
			font-family: 'font';
			align-items: center;
			background: #211f30;
			border-radius: 14rpx;
			padding: 15rpx 40rpx 15rpx 40rpx;
			border: 2rpx solid #3c424d;
		}

		.confirm-btn {
			display: flex;
			color: #ffffff;
			font-size: 24rpx;
			font-weight: 800;
			font-family: 'font';
			align-items: center;
			background: #46a6f8;
			border-radius: 14rpx;
			padding: 15rpx 70rpx 15rpx 70rpx;
			border: 2rpx solid #3c424d;
		}
	}

	.popopop {
		width: 318rpx;
		height: 428rpx;
		border-radius: 10rpx;
		border: 5rpx solid #46a6f8;
		position: absolute;
		z-index: 100;
	}

	.qiehaun {
		width: 680rpx;
		height: 350rpx;
		margin-top: 70rpx;
		border-radius: 14rpx;
		position: relative;

		image {
			width: 680rpx;
			height: 350rpx;
		}

		.images {
			right: 34.88rpx;
			bottom: 20rpx;
			color: #ffffff;
			padding: 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			position: absolute;
			background: #c83b59;
			font-family: 'font';
			border-radius: 19rpx;
			box-shadow: 2rpx 2rpx 9rpx 2rpx rgba(134, 69, 1, 0.4);
		}

		.crazytow {
			top: 20rpx;
			width: 550rpx;
			display: flex;
			flex-wrap: wrap;
			width: 400rpx;
			position: absolute;
			padding: 0 20rpx 0 20rpx;
			.office {
				padding: 20rpx;
				color: #ffffff;
				font-size: 24rpx;
				font-weight: 500;
				font-family: 'font';
				border-radius: 19rpx;
				background: #ca3f5c;
				margin-bottom: 20rpx;
				box-shadow: 2rpx 2rpx 9rpx 2rpx rgba(134, 69, 1, 0.4);
			}
		}
	}

	.list_duck {
		width: 680rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.min_ducklist {
			width: 318rpx;
			height: 408rpx;
			margin-bottom: 45.35rpx;
			border-radius: 9rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		.duck_image {
			position: relative;
			width: 316rpx;
			height: 316rpx;
			border-top: 1rpx solid #3c424d;
			border-left: 1rpx solid #3c424d;
			border-right: 1rpx solid #3c424d;
			border-radius: 9rpx 9rpx 0rpx 0rpx;

			image {
				width: 316rpx;
				height: 316rpx;
				background: #648bd8;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
			}

			.lock {
				width: 316rpx;
				height: 316rpx;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
				position: absolute;
				z-index: 100;
				left: 0;
			}
		}

		.number_duck {
			top: 17.44rpx;
			left: 17.44rpx;
			background: rgba(40, 44, 52, 0.8);
			border-radius: 17rpx;
			position: absolute;
			padding: 5rpx 10rpx 2rpx 10rpx;
			font-family: 'font';
			font-weight: 500;
			color: #46a6f8;
			font-size: 24rpx;
		}

		.duck_buttom {
			width: 316rpx;
			height: 110rpx;
			border-bottom: 1rpx solid #3c424d;
			border-left: 1rpx solid #3c424d;
			border-right: 1rpx solid #3c424d;
			background: #211f30;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			border-radius: 0rpx 0rpx 9rpx 9rpx;

			.name_duck {
				.name {
					font-size: 24rpx;
					font-family: 'font';
					font-weight: 500;
					color: #ffffff;
					margin: 18rpx 0 0 17rpx;
				}

				.num {
					font-size: 20rpx;
					font-family: 'font';
					font-weight: 500;
					color: #8a92a3;
					margin: 15rpx 0 5rpx 17rpx;
				}
			}

			.expedition {
				width: 90rpx;
				height: 35rpx;
				color: #ffffff;
				font-size: 22rpx;
				line-height: 36rpx;
				font-weight: 500;
				margin-top: 55rpx;
				font-family: 'font';
				text-align: center;
				background: #46a6f8;
				border-radius: 9rpx;
			}
		}
	}
}
</style>
